<template>
	<div>
		<div class="header">
			<div class="inputItem">
				<div class="title">全部状态</div>
				<div class="inputBox">
					<el-select class="select" v-model="steelState" placeholder="请选择">
						<el-option v-for="item in SettlementStatusArr" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">结算单号</div>
				<div class="inputBox">
					<el-input v-model="steelNumber" @keyup.enter.native="searchHttpList(1)">
					</el-input>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">项目名称</div>
				<el-select ref="projectNameRef" clearable v-model="projectName" size="small" filterable
					placeholder="请选择" @change="changeProjectName($event)">
					<el-option v-for="item in projectNameOptions" :key="item.projectId" :label="item.name"
						:value="item.projectId">
					</el-option>
				</el-select>
			</div>
			<div class="inputItem">
				<div class="title">司机姓名</div>
				<el-select ref="driverNameRef" clearable v-model="driverName" size="small" filterable placeholder="请选择"
					@change="changeDriverName($event)">
					<el-option v-for="item in driverNameOptions" :key="item.driverId" :label="item.driverName"
						:value="item.driverId">
					</el-option>
				</el-select>
			</div>
			<div class="inputItem">
				<div class="title">创建时间</div>
				<el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<!-- 查询 -->
			<div class="Btn_grounp inputItem">
				<!-- <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
					@click="opneAdd()">新增</el-button> -->
				<el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
					@click="searchHttpList(1)">查询</el-button>
				<el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
					@click="CleanUp">清空</el-button>
				<el-button class="exportBtn" type="primary" size="small"
					@click="exportTimeFrameExecl">导出司机对账单</el-button>
			</div>
		</div>
		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" ref="table">
					<el-table-column align="center" prop="SerialNumber" label="序号" width="60">
						<template slot-scope="scope">
							<div>{{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="transportStatus" label="结算单状态" width="110">
						<template slot-scope="scope">
							<div class="tag" v-if="scope.row.steelState == 0">
								<div class="dian"></div>
								<div class="text">已结算</div>
							</div>
							<div class="tag yellow" v-else-if="scope.row.steelState == 1">
								<div class="dian"></div>
								<div class="text">未结算</div>
							</div>
							<div class="tag Canceled" v-else-if="scope.row.steelState == 2">
								<div class="dian"></div>
								<div class="text">已取消</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="steelNumber" label="结算单号">
					</el-table-column>
					<!--          <el-table-column align="center" prop="orderTypeStr" label="类型">-->
					<!--          </el-table-column>-->
					<!--   <el-table-column align="center" prop="" label="账期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.settlementPeriod
                }}{{ scope.row.settlementPeriodUnit }}
              </div>
            </template>
          </el-table-column> -->
					<el-table-column align="center" prop="projectName" label="项目名称">
					</el-table-column>
					<el-table-column align="center" prop="driverName" label="司机姓名">
					</el-table-column>
					<el-table-column align="center" prop="orderAmount" label="司机金额">
					</el-table-column>
					<el-table-column align="center" label="结算金额">
						<template slot-scope="scope">
							<div v-if="scope.row.payAmount != undefined">
								{{
									scope.row.steelState == 0
										? scope.row.payAmount
										: scope.row.payAmount == 0
											? "--.--"
											: scope.row.payAmount
								}}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="createTime" label="创建时间" sortable>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" @click="
									$router.push(
										'/home/selfOperatedSettlement/selfOperatedSettlementDetails/' +
										scope.row.driverBillId
									)
									">详情</el-button>
								<el-button v-if="scope.row.steelState != 0" type="text" size="small"
									@click="settlementBtn(scope.row)">{{ scope.row.settlementFormType == 0 ? "结算" : "审核" }}</el-button>
								<!-- WaybillManagement/Details/:waybillId -->
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>
		<!-- 司机结算弹出框 -->
		<div>
			<el-dialog title="司机结算" :visible.sync="dialogSettlement" width="500px" center>
				<el-form class="driverList" ref="SettlementForm" :model="SettlementRules" :rules="SettlementRules"
					label-width="100px">
					<el-form-item v-if="SettlementForm.settlementFormType == 1" label="项目名称" prop="projectName">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.projectName" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="应付金额">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.payableAmount" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="SettlementForm.settlementFormType == 1" label="运量" prop="cargoWeight">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.cargoWeight" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="SettlementForm.settlementFormType == 0 ? '实付金额' : '现金收款'"
						:prop="SettlementForm.settlementFormType == 0 ? 'actualPayment' : ''">
						<div style="width: 300px">
							<el-input type="number" :disabled="SettlementForm.settlementFormType == 0 ? false : true"
								v-model="SettlementForm.actualPayment" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="SettlementForm.settlementFormType == 1" label="卸货点">
						<div style="width: 300px">
							<el-input disabled v-model="SettlementForm.addr" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="SettlementForm.settlementFormType == 0" label="支付密码" prop="outPwd">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.outPwd" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="SettlementForm.settlementFormType == 0" label="验证码">
						<div style="width: 300px">
							<el-input class="VerificationCode" placeholder="请输入验证码" v-model="verifyCode">
								<span v-show="showGetCode" class="getCode" slot="suffix"
									@click="getVerificationCode()">获取验证码</span>
								<span class="timing" v-show="!showGetCode" slot="suffix">重新发送({{ count }})</span>
							</el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="SettlementForm.settlementFormType == 0" label="备注" prop="notes">
						<div style="width: 300px">
							<el-input type="textarea" maxlength="30" v-model="SettlementForm.notes" show-word-limit
								style="width: 300px"></el-input>
						</div>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogSettlement = false">取消</el-button>
					<el-button @click="payDriver1(2)" v-if="SettlementForm.settlementFormType == 1">驳回</el-button>
					<el-button @click="payDriver1(1)" v-if="SettlementForm.settlementFormType == 1"
						type="primary">通过</el-button>
					<el-button v-if="SettlementForm.settlementFormType == 0" type="primary"
						@click="payDriver('SettlementForm')">确定</el-button>
				</span>
			</el-dialog>


			<!-- 司机结算新增 -->
			<el-dialog title="新增司机结算" :visible.sync="opneShow" width="500px" center>
				<el-form class="driverList" ref="formDataName" :model="formDataName" :rules="formDataRules"
					label-width="100px">
					<el-form-item label="项目名称" prop="projectId">
						<div class="inputItem" style="width: 300px">
							<el-select style="width: 300px" ref="projectNameRef" clearable
								v-model="formDataName.ownerName" size="small" filterable placeholder="请选择"
								@change="changeProjectName($event)">
								<el-option v-for="item in projectNameOptions" :key="item.projectId" :label="item.name"
									:value="item.projectId">
								</el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="司机姓名" prop="driverId">
						<div class="inputItem" style="width: 300px">
							<el-select style="width: 300px" ref="driverNameRef" clearable
								v-model="formDataName.driverId" size="small" filterable placeholder="请选择"
								@change="changeDriverName($event)">
								<el-option v-for="item in driverNameOptions" :key="item.driverId"
									:label="item.driverName" :value="item.driverId">
								</el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="金额" prop="cashReceipts">
						<div style="width: 300px">
							<el-input v-model="formDataName.cashReceipts" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="现金结算金额" prop="money">
						<div style="width: 300px">
							<el-input v-model="formDataName.money" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="运量" prop="number">
						<div style="width: 300px">
							<el-input v-model="formDataName.number" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="卸货点" prop="addr">
						<div style="width: 300px">
							<el-input v-model="formDataName.addr" style="width: 300px"></el-input>
						</div>
					</el-form-item>

				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogSettlement = false">取消</el-button>
					<el-button v-if="SettlementForm.settlementFormType == 0" type="primary"
						@click="addPay('formDataRules')">确定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import httpApi from "@/http";
import {
	workbook2blob,
	openDownloadDialog
} from '@/common/blobAndOpenDownload.js'
import XLSX from "xlsx";
export default {
	data() {
		return {
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			exc_data: [
				['第一列', '第二列', '第三列'],
				['aa', 'bb', 'cc'],
				['dd', 'ee', 'ff'],
			],
			steelState: "", //运单状态
			steelNumber: "", //运单编号
			projectName: "", //项目名称
			projectId: "", //项目id
			projectNameOptions: [],
			supplierName: "", //货主名称
			driverName: "", // 司机姓名
			driverId: "", //司机id
			driverNameOptions: [],
			createTime: "", //创建时间
			TypeSelected: "",
			selectObj: {}, // 选择结算的对象
			records: [],
			SerialNumber: "",
			data: {},
			pageCurrent: "1",
			size: "15",
			//全部状态选项
			SettlementStatusArr: [{
				value: "",
				label: "全部状态"
			},
			{
				value: "1",
				label: "未结算"
			},
			{
				value: "0",
				label: "已结算"
			},
				// { value: "2", label: "已取消" },
			],
			//   业务类型选项
			BusinessTypeArr: [{
				value: "1",
				label: "无需配送"
			},
			{
				value: "2",
				label: "未发货"
			},
			{
				value: "3",
				label: "部分发货"
			},
			{
				value: "4",
				label: "已发货"
			},
			{
				value: "5",
				label: "待装运"
			},
			{
				value: "6",
				label: "装运完成"
			},
			{
				value: "7",
				label: "运输中"
			},
			{
				value: "8",
				label: "已送达"
			},
			{
				value: "9",
				label: "完成卸货"
			},
			],
			//结算弹出框
			dialogSettlement: false,
			SettlementForm: {
				payableAmount: "", //应付金额
				actualPayment: "",
				notes: "",
				outPwd: '',
				settlementFormType: 0,
				addr: ""
			},
			SettlementRules: {
				payableAmount: [{
					required: true,
					message: "应付金额不能为空",
					trigger: "blur"
				},],
				actualPayment: [{
					required: true,
					message: "请输入金额",
					trigger: "blur"
				},],
				outPwd: [{
					required: true,
					message: "请输入密码",
					trigger: "blur"
				},],
				notes: [{
					max: 30,
					message: "最大30个字符",
					trigger: "blur"
				},],
			},
			showGetCode: true,
			count: "", //验证码计时
			timing: null,
			verifyCode: '', //结算验证码
			seconds: "",
			opneShow: false,
			formDataName: {
				driverId: "",
				driverName: '',
				ownerName: "",
				projectId: "",
				cashReceipts: 0,
				money: 0,
				number: 0,
				addr: ""
			},
			formDataRules: {
				driverId: [{
					required: true,
					message: "请选择司机",
					trigger: "blur"
				},],
				projectId: [{
					required: true,
					message: "请选择项目",
					trigger: "blur"
				},],
				projectId: [{
					required: true,
					message: "请输入金额",
					trigger: "blur"
				},],
				number: [{
					required: true,
					message: "请填写运量",
					trigger: "blur"
				},],
				addr: [{
					required: true,
					message: "请填写卸货点",
					trigger: "blur"
				},],
			},
		};
	},
	methods: {
		addPay() {
			httpApi.carrierSettlementApi.newDriverQueryTransportBill(this.formDataName).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("操作成功");
					this.$router.go(0);
				}
			});

		},
		opneAdd() {
			this.formDataName.driverId = ""
			this.formDataName.driverName = ""
			this.formDataName.ownerName = ""
			this.formDataName.projectId = ""
			this.opneShow = true
		},
		payDriver1(ind) {
			let params = {
				status: ind,
				money: this.SettlementForm.actualPayment,
				driverBillId: this.selectObj.driverBillId
			}
			let str = ind == 1 ? "确认通过该司机的结算单?" : "确认驳回该司机的结算单?"
			if (confirm(str)) {
				httpApi.carrierSettlementApi.modifyDriverProject(params).then((res) => {
					if (res.data.code == 200) {
						this.$message.success("操作成功");
						this.$router.go(0);
						this.dialogSettlement = false;
					}
				});
			}

		},
		//获取结算验证码
		getVerificationCode() {
			// let endTime=new Date().getTime()+60000  //获取未来60秒后的 日期时间

			// sessionStorage.setItem('endTime',endTime)

			this.showGetCode = false;
			const TIME_COUNT = 60; //倒计时初始值60秒
			if (!this.timing) {
				this.count = TIME_COUNT;
				this.timing = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {

						this.count--;
						this.seconds = this.count
						//console.log(this.seconds);
					} else {
						this.showGetCode = true;
						clearInterval(this.timing);
						this.timing = null;
					}
				}, 1000);
			}

			let params = {
				phone: this.$store.state.phoneNumber,
				port: "MODIFY_MONEY",
			}
			//console.log(params)
			httpApi.loginApi.getAuditCode(params).then(res => {
				if (res.data.code == 200) {
					this.$message.success('获取验证码成功')
				}

			})
		},

		// 导出指定时间范围的Execl

		exportTimeFrameExecl() {
			if (this.createTime.length != 2) { //没有指定时间范围 不执行后续代码
				this.$message.warning('请先选择创建时间范围')
				return
			}

			let params = {
				startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
				endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
				driverIds: this.driverId,
				projectIds: this.projectId
			}
			httpApi.selfOperatedSettlementApi.getExcelData(params).then(res => {
				// //console.log(res);
				if (res.data.code == 200) {
					let driverPriceExcels = res.data.data.driverPriceExcels
					let totalExcels = res.data.data.totalExcels
					if (driverPriceExcels.length == 0 && totalExcels.length == 0) {
						this.$message.warning('该excel表没有符合条件数据')
						return
					}


					const sheetData1 = totalExcels.map((item, index) => ({
						'序号': index + 1,
						'配送员': item.driverName,
						'发货单号': item.waybillNo,
						'结算单编号': item.statementOdd,
						'项目名称': item.projectName,
						'发货时间': item.settlementFormType == 0 ? item.startTime : item.finishTime,
						'装车时间': item.settlementFormType == 0 ? item.loadingTime : item.finishTime,
						'完成时间': item.finishTime,
						'货主金额': item.orderTotalAmount,
						'运单总金额': item.waybillTotalAmount,
						'承运人总金额': item.recipientAmount,
						'现金结算': item.cashReceipts,
						'收货地址': item.settlementFormType == 0 ? item.endAddress : item.addr,
						'发货地址': item.startAddress,
						'异常数': item.abnormalNumber,
						'卸货点': item.unloadNumber,
						'运量': item.settlementFormType == 0 ? item.cargoWeight : item.weight,
						'计价单位': item.measureUnit != null ? item.measureUnit.info : "车",
						'是否准点': item.settlementFormType == 0 ? item.punctuality == 1 ? '准点' : '不准点' : "准点",
						'是否结算': item.isSettlement == 0 ? "已结算" : '未结算',
					}));
					//console.log('表1', sheetData1);




					// 支持多 sheet
					const sheetData2 = driverPriceExcels.map((item, index) => ({
						// 在这里设置表头和对应项的值
						'序号': index + 1,
						'姓名': item.driverName,
						'总运单数': item.waybillNumber,
						'总运量': item.totalCargoWeight,
						'发货金额': item.totalAmount,
						'总运费': item.totalWaybillAmount,
						'已结算': item.settledAmount,
						'未结算': item.unSettledAmount,
						'总异常数': item.totalAbnormalNumber,
						'总卸货点': item.totalUnloadNumber,
						'备注': item.remark,
					}));

					const sheet1 = XLSX.utils.json_to_sheet(sheetData1, {
						origin: 'A2'
					});
					// sheet1.Sheets['明细'].A1 = { t: 's', v: '结算单总标题' }

					// //console.log('明细', sheet1);
					sheet1.A1 = {
						t: 's',
						v: `${res.data.data.exportTime}运费结算表`,
						s: {
							font: {
								bold: true
							},
							alignment: {
								horizontal: "center",
								vertAlign: "center"
							},
						}
					}
					for (let key in sheet1) {
						// //console.log(key);
						if (key != '!ref' && key != '!merges' && key != '!cols' && key != 'A1') {
							sheet1[key].s = {
								alignment: {
									horizontal: "center",
									vertAlign: "center"
								},
							}
						}
					}




					sheet1["!merges"] = [{ //合并单元格
						s: { //s为开始
							c: 0, //开始列
							r: 0 //开始取值范围
						},
						e: { //e结束
							c: 14, //结束列
							r: 0 //结束范围
						}
					}]
					let cols = []; // 设置每列的宽度
					// wpx 字段表示以像素为单位，wch 字段表示以字符为单位
					// //console.log(sheetData1);
					let headCol = ['序号',
						'配送员',
						'发货单号',
						'结算单编号',
						'项目名称',
						'发货时间',
						'装车时间',
						'完成时间',
						'货主金额',
						'运单总金额',
						'承运人总金额',
						'现金结算',
						'收货地址',
						'发货地址',
						'异常数',
						'卸货点',
						'运量',
						'计价单位',
						'是否准点',
						'是否结算',
					]
					//console.log('长度', headCol.length);
					for (let i = 0; i <= headCol.length; i++) {
						let col = {};
						col.wch = this.getCellWidth(headCol[i], sheetData1)
						cols.push(col)
					}
					sheet1['!cols'] = cols; // 设置列宽信息到工作表


					const sheet2 = XLSX.utils.json_to_sheet(sheetData2);

					for (let key in sheet2) {
						// //console.log(key);
						if (key != '!ref' && key != '!merges' && key != '!cols') {
							sheet2[key].s = {
								alignment: {
									horizontal: "center",
									vertAlign: "center"
								},
							}
						}
					}

					const wb = XLSX.utils.book_new(); // 初始化一个excel文件
					XLSX.utils.book_append_sheet(wb, sheet1, '明细');
					XLSX.utils.book_append_sheet(wb, sheet2, '运费');

					//console.log('wb', wb);


					const workbookBlob = workbook2blob(wb);
					// 导出最后的总表

					openDownloadDialog(workbookBlob, `${this.createTime[0]}至${this.createTime[1]} 结算单总表.xlsx`);
				}
			})
		},
		getCellWidth(value, sheetData) { //计算每列的需设置的宽度
			if (value == '序号') {
				return 10
			} else if (value == '配送员') {
				return 12
			} else if (value == '结算单编号') {
				return 29
			} else if (value == '发货单号') {
				return 29
			} else if (value == '项目名称') {
				return 18
			} else if (value == '收货地址') {
				let maxWitdh = 18
				sheetData.forEach(item => {
					if (item['收货地址'] != '' && item['收货地址'] != null) {
						let width = item['收货地址'].length * 2.1
						if (maxWitdh < width) {
							maxWitdh = width
						}
					}
					//console.log('max', maxWitdh);
				})
				return maxWitdh
			} else if (value == '发货地址') {
				let maxWitdh = 18
				sheetData.forEach(item => {
					if (item['发货地址'] != '' && item['发货地址'] != null) {
						let width = item['发货地址'].length * 2.1
						if (maxWitdh < width) {
							maxWitdh = width
						}
					}
					//console.log('max', maxWitdh);
				})
				return maxWitdh
			} else if (value == '卸货点') {
				let maxWitdh = 18
				sheetData.forEach(item => {
					if (item['卸货点'] != '' && item['卸货点'] != null) {
						let width = item['卸货点'].length * 2.1
						if (maxWitdh < width) {
							maxWitdh = width
						}
					}
					//console.log('max', maxWitdh);
				})
				return maxWitdh
			} else if (value == '发货时间' || value == '装车时间' || value == '完成时间') {
				return 22
			} else if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { //其余的根据表头汉字 大概设置宽度
				// 中文的长度
				const chineseLength = value.match(/[\u4e00-\u9fa5]/g).length;
				// 其他不是中文的长度
				const otherLength = value.length - chineseLength;
				return chineseLength * 2.1 + otherLength * 1.1;
			}
		},
		defaultStyle() {
			let cells = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O"]
			//  
		},
		changePages(val) {
			this.pageCurrent = val;
			this.searchHttpList();
		},


		searchHttpList(current) {
			let params = {
				current: current || this.pageCurrent,
				size: this.size,
				steelState: this.steelState,
				steelNumber: this.steelNumber,
				driverName: this.driverName,
				projectName: this.projectName,
				startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
				endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
			};
			httpApi.selfOperatedSettlementApi.getPaymentList(params).then((res) => {
				////console.log(res);
				this.data = res.data.data;
				this.records = res.data.data.records;

				////console.log("总数据", this.data);
				////console.log("列表数据", this.records);
			});
		},

		CleanUp() {
			this.steelState = "";
			this.steelNumber = "";
			this.projectName = "";
			this.supplierName = "";
			this.driverName = "";
			this.createTime = "";
			this.projectId = "";
			this.driverId = ""
			this.searchHttpList(1);
		},
		// 点击结算
		settlementBtn(val) {
			this.SettlementForm = {
				payableAmount: "", //应付金额
				actualPayment: "",
				notes: "",
				settlementFormType: 0,
				addr: "",
				cargoWeight: "",
				projectName: "",

			};
			this.selectObj = val;
			this.SettlementForm.payableAmount = val.orderAmount;
			if (val.settlementFormType == 0) {
				this.SettlementForm.actualPayment = val.orderAmount;
			} else {
				this.SettlementForm.actualPayment = val.cashReceipts;
				this.SettlementForm.addr = val.addr;
				this.SettlementForm.projectName = val.projectName;
				this.SettlementForm.cargoWeight = val.cargoWeight;
			}
			this.SettlementForm.settlementFormType = val.settlementFormType;
			this.dialogSettlement = true;
		},
		changeDriverName() {
			this.$nextTick(function () {
				this.driverName = this.$refs.driverNameRef.selected.label
				this.driverId = this.$refs.driverNameRef.selected.value
				//console.log(this.driverName, this.driverId);
				this.formDataName.driverName = this.$refs.driverNameRef.selected.label
				this.formDataName.driverId = this.$refs.driverNameRef.selected.value
			});
		},
		changeProjectName() {
			this.$nextTick(function () {
				this.projectName = this.$refs.projectNameRef.selected.label
				this.projectId = this.$refs.projectNameRef.selected.value
				//console.log(this.projectName, this.projectId)

				this.formDataName.ownerName = this.$refs.projectNameRef.selected.label
				this.formDataName.projectId = this.$refs.projectNameRef.selected.value

				console.log(this.formDataName)

			});
		},
		getDriverNameOptions() {
			httpApi.selfOperatedSettlementApi.selectDriverInfo({}).then(res => {
				if (res.data.code == 200) {
					this.driverNameOptions = res.data.data
				}
			})
		},
		getProjectNameOptions() {
			httpApi.selfOperatedSettlementApi.selectProjectName({}).then(res => {
				if (res.data.code == 200) {
					this.projectNameOptions = res.data.data
				}
			})
		},

		// 结算
		payDriver(SettlementForm) {

			this.$refs[SettlementForm].validate((valid) => {
				if (valid) {
					let params = {
						driverBillId: this.selectObj.driverBillId,
						billAmount: this.SettlementForm.payableAmount,
						settlementAmount: this.SettlementForm.actualPayment,
						statementExplain: this.SettlementForm.notes,
						outPwd: this.SettlementForm.outPwd,
						code: this.verifyCode
					};
					httpApi.carrierSettlementApi
						.orderApplyForPay(params).then((res) => {
							if (res.data.code == 200) {
								this.$message.success("结算成功");
								this.searchHttpList();
							}
							this.dialogSettlement = false;
						});
				} else {
					return false;
				}
			});

		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
		},
	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},
	mounted() {
		this.getDriverNameOptions()
		this.getProjectNameOptions()
		this.searchHttpList();
	},
};
</script>

<style lang="scss" scoped>
.VerificationCode {
	height: 40px;
	margin-bottom: 19px;

	::v-deep .el-input__prefix {
		margin-left: 2px;
		line-height: 40px;
	}

	::v-deep .el-input__inner {
		height: 40px;
	}

	.getCode {
		color: #1890ff;
		font-size: 14px;
		line-height: 40px;
		display: inline-block;
		margin-right: 13px;
		position: relative;
		z-index: 800;
		cursor: pointer;
	}

	.timing {
		color: #1890ff;
		font-size: 14px;
		line-height: 40px;
		margin-right: 13px;
	}

	.icon-yanzhengma {
		font-size: 18px;
	}
}

.header {
	//height: 76px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 29px;
	flex-wrap: wrap;
	margin-bottom: 8px;



	.Btn_grounp {
		display: flex;
		justify-content: flex-end;

		.searchBtn {
			width: 80px;
			height: 32px;
			color: #fff;
			font-size: 12px;
		}

		.clearBtn {
			width: 80px;
			height: 32px;
			color: #262626;
			font-size: 12px;
		}

		.exportBtn {
			display: inline-block;
			padding: 9px;
		}

	}

	.inputItem {
		width: calc(100% / 3);
		display: flex;
		align-items: center;
		margin-top: 10px;

		>.title {
			color: #262626;
			font-size: 12px;
			flex-shrink: 0;
			margin-right: 7px;
		}

		>.inputBox {
			width: 160px;

			.select {
				::v-deep .el-input__icon {
					line-height: 0;
				}
			}

			::v-deep .el-input__inner {
				height: 32px;
				font-size: 12px;
			}

			::v-deep .el-input__inner::placeholder {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}
}

::v-deep .el-dialog .el-dialog__body .driverList {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main {
	width: 100%;
	height: calc(100vh - 283px);
	background-color: #fff;
	padding: 0px 30px 0 30px;



	.list {
		height: calc(100% - 50px);
		width: 100%;

		.tag {
			width: 63px;
			height: 28px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			background-color: #ecf5fe;
			color: #1890ff;
			margin: 0 auto;

			&.yellow {
				background-color: #fffce8;
				color: #f9aa0d;

				.dian {
					background-color: #f9aa0d;
				}
			}

			&.Canceled {
				background-color: #fde8e9;
				color: #f5222d;

				.dian {
					background-color: #f5222d;
				}
			}

			.dian {
				width: 4px;
				height: 4px;
				border-radius: 50%;
				margin-right: 4px;
				background-color: #1890ff;
			}
		}

		::v-deep .el-table__body-wrapper {
			height: calc(100vh - 382px);
			overflow-y: scroll;
		}

		// 表头样式
		::v-deep .el-table__header th {
			background-color: #f0f6fd;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			padding: 0;
			height: 48px;

			// 表 body的td
			::v-deep .el-table__body td {
				color: #595959;
				font-size: 12px;
			}
		}

		.stateBtns {
			height: 30px;
			width: 76px;

			::v-deep .el-button {
				height: 30px;
				width: 76px;
				font-size: 12px;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 30px;
			}

			.waitPass {
				background-color: #ecf5fe;
				color: #1890ff;
			}

			.noPass {
				background-color: #fde8e9;
				color: #f7555d;
			}
		}
	}

	.paginationBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;

		align-items: center;

		.pagination {
			height: 48px;
			display: flex;
			align-items: center;
			margin-left: auto;
		}
	}
}
</style>